<template>
  <div>
    <public-modal
      width="1200px"
      :footer="false"
      :title="title"
      modalStyle="visitor-detailModal"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="content-wrap">
          <div class="header flex">
            <img src="@/assets/imgs/event/icon.png" alt="" />
            <div class="header-right flex column justify-around">
              <div class="restaurant-name">{{ records.restaurantName }}</div>
              <div class="mn">
                营业地址:
                <span class="MN-number">{{ records.detailAddress }}</span>
              </div>
            </div>
          </div>

          <div class="detail-info">
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">所属街道：</div>
                <div class="detail-info-value">{{ records.regionId_dictText }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">监管单位：</div>
                <div class="detail-info-value">{{ records.unitId_dictText }}</div>
              </div>
              <div class="f1 flex"></div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">餐厅规模：</div>
                <div class="detail-info-value">
                  {{ records.scale_dictText }}
                </div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">餐厅负责人：</div>
                <div class="detail-info-value">{{ records.chargeName }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">负责人电话：</div>
                <div class="detail-info-value">{{ records.chargePhone }}</div>
              </div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">清洗周期(天)：</div>
                <div class="detail-info-value">{{ records.cleanCycle }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">上一次清洗时间：</div>
                <div class="detail-info-value">{{ records.cleanTime.split(' ')[0] }}</div>
              </div>
              <!-- v-if="records.scale == 1" -->
              <div class="f1 flex">
                <div class="detail-info-lable">逾期时间:</div>
                <div class="detail-info-value" style="color: #f75177">{{ records.expireDay * -1 }} 天</div>
              </div>
              <!-- <div class="f1" v-else></div> -->
            </div>

            <!-- <div class="detail-info" v-if="records.scale != 1">
              <div class="alter-container flex align-center">清洗逾期详情</div>
              <div class="detail-info-common flex">
                <div class="f1 flex">
                  <div class="detail-info-lable">逾期时间:</div>
                  <div class="detail-info-value" style="color: #f75177">{{ records.expireDay * -1 }} 天</div>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import publicModal from '@/components/publicModal'
import { comMethods } from '@/mixins/comMethods'

export default {
  name: 'cancelModel',
  mixins: [comMethods],
  components: { publicModal },
  data() {
    return {
      title: '',
      records: {},
      imgPrefix: '',
      fanImgList: [], // 风机
      smokeImgList: [], // 烟道
      purifyImgList: [], // 净化器
      publicVisible: false,
    }
  },
  mounted() {},
  methods: {
    show(records) {
      this.records = records
      this.title = '清洗逾期详情页'
      if (records.restaurantScale != 1) {
      }

      this.publicVisible = true
    },

    cancel() {
      this.publicVisible = false
    },
    handleOk() {},
  },
}
</script>
<style lang="less">
.visitor-detailModal {
  .content-wrap {
    width: 1200px;
    height: 90%;
    margin: 0 auto;
    overflow: hidden;
    background: #024c4e;
    padding: 40px 50px;

    .header {
      padding-bottom: 20px;
      border-bottom: 2px solid #05585a;
      margin-bottom: 20px;
      .header-right {
        margin-left: 5px;
      }
      .restaurant-name {
        font-size: 18px;
        line-height: 18px;
        font-weight: 500;
        color: #85fcff;
      }
      .mn {
        font-size: 14px;
        font-weight: 400;
        color: #06d6db;
        line-height: 14px;
      }
    }

    .alter-container {
      height: 40px;
      margin-left: 60px;
      margin-bottom: 20px;
      padding-left: 14px;
      background: #03585b;

      font-size: 14px;
      font-weight: 500;
      color: #51bfbd;
    }

    .detail-info-common {
      padding-left: 60px;
      font-size: 14px;
      font-weight: 400;
      color: #02c1c7;
      margin-bottom: 20px;
      .detail-info-value {
        color: #9cfdff;
        margin-left: 5px;
      }

      img {
        // flex: 1;
        max-width: 240px;
        width: 240px;
        height: 160px;
        background-size: cover;
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
